<template>
  <div id="">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template #title>我的工作台</template>
        <div class="menu-dropdown-inner" style="left: 0; z-index: 0; width: 932px; height: 500px; overflow: auto">
          <!-- 具体代码实现 -->

          <!-- 左侧导航 -->
          <div class="menu-dropdown-sidebar pull-left" id="pull-left" style="height: 100%; background-color: #f5f5f5">
            <ul id="pull-left-ul" style="list-style: none">
              <li v-for="item in apidata" :key="item.id" :id="item.id" @mouseenter="test1(item.nodeList, item.id)">
                {{ item.name }}
              </li>
            </ul>
          </div>

          <!-- 右侧导航 -->
          <div class="menu-dropdown-content" style="height: 100%">
            <div id="pullright" style="float: right; width: 100%">
              <div id="pullright1" v-for="item in maindata" :key="item.id" style="float: left; width: 30%; padding-left: 20px">
                <p style="font-weight: bold; color: #0000ff">{{ item.name }}</p>
                <p
                  v-for="son_item in item.leafList"
                  :key="son_item.id"
                  :id="son_item.id"
                  @mouseenter="testMouseenter(son_item.id)"
                  @mouseleave="testMouseleave(son_item.id)"
                >
                  <a :href="son_item.url" target="_blank">{{ son_item.name }}</a>
                </p>
              </div>
            </div>

            <!--
              <dl v-for="item in maindata" :key="item.id">
                <dt style="font-weight: bold;">{{item.name}}</dt>
                <dd v-for="son_item in item.leafList" :key="son_item.id">
                <a :href="son_item.url" target="_blank">{{son_item.name}}</a>
                </dd>
              </dl> -->
          </div>

          <!-- 华丽的分割线 -->
        </div>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
    <div class="line"></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'TabHover',
  data() {
    return {
      activeIndex: '1',
      data_tab: [
        {
          index: 2 - 1,
          value: '测试1'
        },
        {
          index: 2 - 2,
          value: '测试2'
        },
        {
          index: 2 - 3,
          value: '测试3'
        }
      ],
      from_data: [],
      index: 1,
      maindata: [],
      Asidedata: [],
      apidata: [
        {
          // 模拟的接口数据
          id: '1522392995074473985',
          parentId: null,
          path: '/1522392995074473985',
          name: '弹性计算',
          orderNo: '1522392995074473985',
          nodeList: [
            {
              id: '1522392995615539202',
              parentId: '1522392995074473985',
              path: '/1522392995074473985/1522392995615539202',
              name: '云服务器',
              orderNo: '1522392995615539202',
              nodeList: null,
              leafList: [
                {
                  id: '1522392996378902529',
                  categoryId: '1522392995615539202',
                  name: '云服务器ECS',
                  url: 'https://www.baidu.com',
                  orderNo: '1522392996378902529'
                },
                {
                  id: '1522392996718641154',
                  categoryId: '1522392995615539202',
                  name: '轻量应用服务器',
                  url: 'https://www.baidu.com',
                  orderNo: '1522392996718641154'
                },
                {
                  id: '1522392997049991170',
                  categoryId: '1522392995615539202',
                  name: 'GPU 云服务器',
                  url: 'https://www.baidu.com',
                  orderNo: '1522392997049991170'
                }
              ]
            },
            {
              id: '1522392997398118402',
              parentId: '1522392995074473985',
              path: '/1522392995074473985/1522392997398118402',
              name: '无影云电脑',
              orderNo: '1522392997398118402',
              nodeList: null,
              leafList: [
                {
                  id: '1522392997922406401',
                  categoryId: '1522392997398118402',
                  name: '无影云桌面',
                  url: 'https://www.baidu.com',
                  orderNo: '1522392997922406401'
                },
                {
                  id: '1522392998262145025',
                  categoryId: '1522392997398118402',
                  name: '无影云硬件终端',
                  url: 'https://www.baidu.com',
                  orderNo: '1522392998262145025'
                }
              ]
            },
            {
              id: '1522392998601883650',
              parentId: '1522392995074473985',
              path: '/1522392995074473985/1522392998601883650',
              name: '弹性编排',
              orderNo: '1522392998601883650',
              nodeList: null,
              leafList: [
                {
                  id: '1522392999121977346',
                  categoryId: '1522392998601883650',
                  name: '弹性伸缩',
                  url: 'https://www.baidu.com',
                  orderNo: '1522392999121977346'
                },
                {
                  id: '1522392999461715970',
                  categoryId: '1522392998601883650',
                  name: '资源编排',
                  url: 'https://www.baidu.com',
                  orderNo: '1522392999461715970'
                },
                {
                  id: '1522392999818231810',
                  categoryId: '1522392998601883650',
                  name: '运维编排 OOS',
                  url: 'https://www.baidu.com',
                  orderNo: '1522392999818231810'
                }
              ]
            }
          ],
          leafList: null
        },
        {
          id: '1522393000157970433',
          parentId: null,
          path: '/1522393000157970433',
          name: '存储',
          orderNo: '1522393000157970433',
          nodeList: [
            {
              id: '1522393000489320449',
              parentId: '1522393000157970433',
              path: '/1522393000157970433/1522393000489320449',
              name: '基础存储服务',
              orderNo: '1522393000489320449',
              nodeList: null,
              leafList: [
                {
                  id: '1522393001152020481',
                  categoryId: '1522393000489320449',
                  name: '块存储 EBS',
                  url: 'https://www.baidu.com',
                  orderNo: '1522393001152020481'
                },
                {
                  id: '1522393001487564801',
                  categoryId: '1522393000489320449',
                  name: '对象存储 OSS',
                  url: 'https://www.baidu.com',
                  orderNo: '1522393001487564801'
                },
                {
                  id: '1522393001827303426',
                  categoryId: '1522393000489320449',
                  name: '文件存储 NAS',
                  url: 'https://www.baidu.com',
                  orderNo: '1522393001827303426'
                }
              ]
            },
            {
              id: '1522393002162847745',
              parentId: '1522393000157970433',
              path: '/1522393000157970433/1522393002162847745',
              name: '存储数据服务',
              orderNo: '1522393002162847745',
              nodeList: null,
              leafList: [
                {
                  id: '1522393002678747138',
                  categoryId: '1522393002162847745',
                  name: '日志存储 SLS',
                  url: 'https://www.baidu.com',
                  orderNo: '1522393002678747138'
                },
                {
                  id: '1522393003010097153',
                  categoryId: '1522393002162847745',
                  name: '云备份 HBR',
                  url: 'https://www.baidu.com',
                  orderNo: '1522393003010097153'
                },
                {
                  id: '1522393003341447169',
                  categoryId: '1522393002162847745',
                  name: '智能媒体管理 IMM',
                  url: 'https://www.baidu.com',
                  orderNo: '1522393003341447169'
                }
              ]
            },
            {
              id: '1522393003681185793',
              parentId: '1522393000157970433',
              path: '/1522393000157970433/1522393003681185793',
              name: '混合云存储',
              orderNo: '1522393003681185793',
              nodeList: null,
              leafList: [
                {
                  id: '1522393004197085186',
                  categoryId: '1522393003681185793',
                  name: '混合云存储',
                  url: 'https://www.baidu.com',
                  orderNo: '1522393004197085186'
                },
                {
                  id: '1522393004532629506',
                  categoryId: '1522393003681185793',
                  name: '云存储网关 CSG',
                  url: 'https://www.baidu.com',
                  orderNo: '1522393004532629506'
                },
                {
                  id: '1522393004880756737',
                  categoryId: '1522393003681185793',
                  name: '混合云容灾 HDR',
                  url: 'https://www.baidu.com',
                  orderNo: '1522393004880756737'
                }
              ]
            }
          ],
          leafList: null
        }
      ]
    }
  },
  created() {
    this.get_data()
  },
  methods: {
    test1(val, itemId) {
      console.log('test1:', val)
      this.maindata = val
      let leftUl = document.getElementById('pull-left-ul')

      // 把左侧的li color展示成黑色
      let leftLi = leftUl.childNodes
      for (let index = 0; index < leftLi.length; index++) {
        leftLi[index].style.color = '#000'
      }

      // 获取左侧div的高度 pull-left
      let pullLeft = document.getElementById('pull-left')
      console.log('div的宽度', pullLeft.style.height)

      // itemId 设置左侧的数据上去的颜色
      let itemIdDoc = document.getElementById(itemId)
      itemIdDoc.style.color = '#0000FF'

      // pull-right
      let pullright = document.getElementById('pullright')
      console.log('pullright,', pullright.style.width)

      // pull-right
      let pullright1 = document.getElementById('pullright1')
      console.log('pullright1,', pullright1.style.width)
    },
    testMouseleave(itemId) {
      // 左侧标签离开切换颜色
      let itemIdDoc = document.getElementById(itemId)
      console.log('testMouseleave:', itemId)
      itemIdDoc.style.color = '#000'

      // a标签离开切换颜色
      let timeA = itemIdDoc.getElementsByTagName('a')
      console.log('timeA:', timeA)
      timeA[0].style.color = '#000'
    },
    testMouseenter(itemId) {
      let itemIdDoc = document.getElementById(itemId)
      console.log('testMouseenter:', itemId)

      let timeA = itemIdDoc.getElementsByTagName('a')
      console.log('timeA:', timeA)
      timeA[0].style.color = '#0000FF'
    },

    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    get_data() {
      console.log('hover...')
      let url = 'http://XXX' // 后续可实现接口进行数据传输实现，以后有数据改动就不需要改前端了
      axios.get(url).then(res => {
        console.log(res.status)
        if (res.status == 200) {
          this.from_data = res.data.data
        }
      })
    }
  }
}
</script>

<style>
a {
  color: #000000;
  text-decoration: none;
}

/*  .menu-dropdown-inner {
    margin: 0;
    padding: 0;
  } */
.menu-dropdown-sidebar {
  float: left;
  width: 162px;
  height: auto;
  padding: 19px 10px 15px 21px;

  /* line-height: 18px; */
  color: #333333;
  border: 1px solid black;
}
.menu-dropdown-content {
  padding: 25px 0 0 20px;
  margin-left: 193px;
  color: #333333;
  background-color: #ffffff;
  border: 1px solid red;
}
#pull-left-ul li {
  /* padding-top: 10px; */

  /* padding-left: 30px; */
  line-height: 40px;

  /* 展示小手样式 */
  cursor: pointer;
}

/*  #tab_content {
  width: 1000px;
  height: 500px;
  width: calc(100vw - 200px);
  height: calc(100vw - 1300px);
  border: 1px solid red;
  background-color: skyblue;
  position: relative;
} */

/*  .content_test {
  position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
} */

/*  span{
    margin-top: 10px;
    word-break:normal;
    width:auto;
    display:block;
    white-space:pre-wrap;
    word-wrap : break-word ;
    overflow: hidden ;
} */
</style>
